<template>
	<div style="width: 100%;">
		<el-collapse @change="handleChange">
			<el-collapse-item title="用户ID" name="1">
				<div>
					<h3>{{id}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="课程编号" name="2">
				<div>
					<h3>{{course.courseno}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="课程名称" name="3">
				<div>
					<h3>{{course.coursename}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="总学时" name="4">
				<div>
					<h3>{{course.totalperiod}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="学分" name="5">
				<div>
					<h3>{{course.credit}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="学院" name="6">
				<div>
					<h3>{{course.faculty}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="课程类别" name="7">
				<div>
					<h3>{{course.category}}</h3>
				</div>
			</el-collapse-item>
			<el-collapse-item title="考试方式" name="8">
				<div>
					<h3>{{course.score}}</h3>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	//引入axios
	import axios from 'axios'

	export default {
		name: 'Details',
		mounted() {
			axios({
				//请求地址
				url: 'http://localhost:8080/axios/queryCourseBySt',
				//请求方式
				method: 'post',
				params: {
					courseid: this.$route.query.id
				},
			}).then(
					res => {
						this.course = res.data.msg
						this.id = this.$route.query.id
					},
					err => {
						console.log(err.message)
					}
			)
		},
		data() {
			return {
				activeNames: ['1'],
				course: '',
				id: ''
			};
		},
		methods: {
			handleChange(val) {
				console.log(val);
			}
		}
	}
</script>
